<template>
  <div class="header-container">
    <div class="icon">
      <i v-if="!isCollapse" class="iconfont icon-right-indent" @click="changeMenu"></i>
      <i v-else class="iconfont icon-left-indent" @click="changeMenu"></i>
    </div>
    <el-button type="primary" @click="goReception">购物商城</el-button>
    <div class="r-content">
      <el-dropdown @command="clickLang" class="left-drop">
        <span class="el-dropdown-link" style="color: #fff"> 多语言<i class="el-icon-arrow-down el-icon--right"></i> </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="zh">中文</el-dropdown-item>
          <el-dropdown-item command="en">English</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <screenfull-vue></screenfull-vue>
      <el-dropdown trigger="click" size="mini">
        <span class="el-dropdown-link"><img :src="userImg" class="user" /></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="modify" icon="el-icon-edit"><span>修改图片</span></el-dropdown-item>
          <el-dropdown-item @click.native="logout" icon="el-icon-switch-button"><span>退出</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog title="修改图片" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-upload class="avatar-uploader" action="https://jk.huwei6.com/api/tengxun/upload2" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ScreenfullVue from '@/components/Screenfull.vue'
export default {
  name: 'FirstProjectIndex',
  props: ['isCollapse'],

  data() {
    return {
      userImg: '',
      dialogVisible: false,
      imageUrl: ''
    }
  },

  mounted() {},

  methods: {
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    changeMenu() {
      // 点击切换按钮的时候，修改父组件的数据
      this.$emit('changeCollapse')
    },
    async getHeadImg() {
      const { data: res } = await this.$http.post('/head_img', { username: window.sessionStorage.getItem('username') })
      this.userImg = res.data[0].head_img
    },
    modify() {
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleAvatarSuccess(response, file, fileList) {
      // this.imageUrl = URL.createObjectURL(file.raw)
      this.$message({
        message: '恭喜你，图片上传成功',
        type: 'success'
      })
      console.log(response)
      this.imageUrl = response.imageUrl
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    async submit() {
      this.dialogVisible = true
      const { data: res } = await this.$http.post('update/head_img', { username: window.sessionStorage.getItem('username'), head_img: this.imageUrl })
      console.log(res)
      this.dialogVisible = false
      console.log(this.imageUrl)
      this.getHeadImg()
    },
    clickLang(command) {
      console.log(command)
      this.$i18n.locale = command
    },
    async goReception() {
      const confirmResult = await this.$confirm('是否跳转购物商城?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消跳转购物商城')
      }
      let routeUrl = this.$router.resolve({ name: 'login-register' })
      window.open(routeUrl.href, '_blank')
    }
  },
  components: {
    ScreenfullVue
  },
  created() {
    this.getHeadImg()
    console.log('username', this.$store.state.username)
  }
}
</script>

<style lang="scss" scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  padding: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    i {
      font-size: 24px;
    }
  }
  .r-content {
    margin-right: 20px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .el-dropdown-link {
      color: #fff;
      .user {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 15px;
      }
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style lang="scss" scoped>
.el-dropdown-menu--mini .el-dropdown-menu__item {
  width: 110px !important;
  height: 40px !important;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
}
.left-drop {
  margin-top: -20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  line-height: 20px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-button {
  margin-bottom: 20px;
}
.el-button {
  background-image: linear-gradient(to right top, #a98fb3, #a08fb9, #9490bd, #8691c1, #7593c4);
}
</style>
